<script lang="ts">
import {defineComponent, reactive} from "vue"
import toolbars from "./toolbars"
import config from "@/units/config"
import {useZIndex} from "element-plus";
import ImageButton from "./Menu/Image"
import VideoButton from "./Menu/Video"
import FileButton from "./Menu/File"
import {useResource} from "@/components/FunctionComponents";

export default defineComponent({
  props: {
    modelValue: [String, Number],
    disabled: {
      type: Boolean
    },
    clearable: {
      type: Boolean
    },
    height: {
      type: Number,
      default: 360
    }
  },
  setup(props) {
    let ueditor: any = null

    const {nextZIndex} = useZIndex()
    const EditorConfig: any = reactive({
      toolbars: toolbars(),
      serverUrl: '',
      zIndex: nextZIndex(),
      UEDITOR_HOME_URL: config.baseUrl + '/ueditor/',//静态资源目录
      initialFrameWidth: null,//宽度随浏览器自适应
      wordCount: false, //关闭字数统计
      elementPathEnabled: false,//隐藏元素路径
      autoHeightEnabled: false,//是否自动长高
      enableAutoSave: false,//自动保存
      initialFrameHeight: props.height,//初始化编辑器高度,默认320
      autoFloatEnabled: false//是否保持toolbar的位置不动
    })


    /**
     * 编辑器初始化回调钩子
     * @param editorId
     * @constructor
     */
    function EditorBeforeInit(editorId: any) {
      //注册图片按钮
      ImageButton(editorId, () => {
        useResource('image', function (res: any[]) {
          if (res.length > 0) {
            res.forEach(res => {
              //@ts-ignore
              ueditor.execCommand('inserthtml', `<img alt="${res.name}" src="${res.url}"/>`);
            })
            console.log(res);
          }
        }, 5)
      })

      //注册视频按钮
      VideoButton(editorId, () => {
        useResource('video', function (res: any[]) {
          if (res.length > 0) {
            res.forEach(res => {
              //@ts-ignore
              ueditor.execCommand('inserthtml',
                  `<p>
                            <span contenteditable="false"  data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen"  data-mce-p-frameborder="no" data-mce-p-scrolling="no"  data-mce-p-src="${res.url}" >
                                <video src="${res.url}" width="420" style="width:auto;max-width:100%;height:auto" controls="controls"></video>
                            </span>
                         </p>`
              );
            })
            console.log(res);
          }
        }, 1)
      })

      //注册文件按钮
      FileButton(editorId, () => {
        useResource('file', function (res: any[]) {
          if (res.length > 0) {
            res.forEach(res => {
              //@ts-ignore
              ueditor.execCommand('inserthtml', `<a href="${res.url}" target="_self" title="7575757" _href="${res.url}">${res.name}</a>`);
            })
          }
        }, 1)
      })
    }

    /**
     * 富文本加载完成事件
     * @param editor
     * @constructor
     */
    function EditorReady(editor: any) {
      editor.setContent(props.modelValue)
      ueditor = editor
    }

    return {
      EditorConfig, EditorBeforeInit, EditorReady
    }
  }
})
</script>
<template>
  <div class="form-ueditor">
    <vue-ueditor-wrap v-bind="$attrs" @before-init="EditorBeforeInit" @ready="EditorReady" :config="EditorConfig" destroy></vue-ueditor-wrap>
  </div>
</template>
<style lang="scss" scoped>
.form-ueditor {
  all: initial;
}
</style>